<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<!--
 * Created on 2014-3-7
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
-->
 <head>
  <title> </title>
 </head>
 <body>
 <canvas id="c" width="805" height="400"></canvas>
 <script>
 document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218
	// start of submission //
var w=h=400,mx=-2.5,my=2,mw=4,mh=4,jx,jy,jw,jh,jcx,jcy,c=document.getElementById("c"),g=c.getContext("2d");c.width=w*2+5;c.height=h;c.onclick=function(a){x=a.clientX-c.offsetLeft;y=a.clientY-c.offsetTop;if(a.altKey){if(x<w){x=(mw*x/w)+mx;y=my-(mh*y/h);mx=x-(mw/4);my=y+(mh/4);mw=mw/2;mh=mh/2;m()}else{x=(jw*(x-w-5)/w)+jx;y=jy-(jh*y/h);jx=x-(jw/4);jy=y+(jh/4);jw=jw/2;jh=jh/2;j(jcx,jcy)}}else{if(x<w){jx=-2,jy=2,jw=4,jh=4;x=(mw*x/w)+mx;y=my-(mh*y/h);jcx=x;jcy=y;j(x,y)}}};function i(e,d,b,q,l,p){y_s=l;for(var n=0;n<w;n++){for(var k=0;k<h;k++){var a=e(b,l);g.fillStyle="rgb("+a+","+(a*4)%256+","+(a*8)%256+")";g.fillRect(n+d,k,1,1);l+=p}b+=q;l=y_s}}function mj(e,o,f,d){for(var n=0;n<256;n++){var k=e*e,l=o*o;if((k+l)>4){return n}o=(2*e*o)+d;e=k-l+f}return 0}function m(){g.clearRect(0,0,w,h);i(function(e,d){return mj(e,d,e,d)},0,mx,mw/w,my,-mh/h)}function j(e,d){g.clearRect(w+5,0,w,h);i(function(a,b){return mj(a,b,e,d)},w+5,jx,jw/w,jy,-jh/h);g.fillStyle="#fff";g.fillText(e+","+d+"\n"+jw+","+jh,w+10,10)}m();
	// end of submission //
 </script>
 </body>
</html>
